<template>
  <div class="retrieve-password">
    <div class="nav">
      <van-nav-bar left-arrow border @click-left="onClickLeft">
        <template #title>
          <span class="title-bar">重置密码</span>
        </template>
      </van-nav-bar>
    </div>
    <section class="email-form">
      <van-form @submit="nextStep" validate-trigger='onSubmit'>
        <van-field
          v-model="email"
          label-width='50px'
          name="email"
          label="邮箱"
          placeholder="请输入账号绑定的邮箱"
          :rules="[{ pattern , message:'请输入正确的邮箱号' }]"
        />
        <div class="next-btn">
          <van-button round block type="info" native-type="submit" :loading="btnloading">下一步</van-button>
        </div>
      </van-form>
    </section>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Getverificationcode } from '../../api/login'

import { reactive, toRefs } from "@vue/composition-api";

export default {
  
  name: "retrievepassword",

  setup(props,{root}){

      const state = reactive({
        pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        email:null,
        btnloading:false,
      })

      const onClickLeft =()=> {
        root.$router.go(-1);
      }

     const nextStep = async (params) =>{
      if(params){
        state.btnloading = true
        let res = await Getverificationcode(params.email)
        if(res.success){
            Toast.success('验证码发送成功');
            state.btnloading = false
            setTimeout(() => {
            root.$router.push({ path:"/retrieveNext" , query:params})
          }, 300);
        }else{
          Toast.success(res.msg);
          state.btnloading = false
        }
      }
     }

    return{
        ...toRefs(state),
        onClickLeft,
        nextStep
    }
  }
};
</script>

<style lang="less" scoped>
.retrieve-password {
  margin: 0;
  padding: 0;

.next-btn{
  margin: 0 30rem / 75;
  margin-top: 40rem / 75;
}
.email-form{
 margin-top: 250rem / 75;
}
}
</style>